import { headerList, headerLists } from './index.config';
import { useHistory } from 'umi';
import footer1 from '@/config/img/footer1.png';
import footer2 from '@/config/img/footer2.png';
import footer3 from '@/config/img/footer3.png';
import { Menu } from 'antd';
import './index.less';
import { useEffect, useState } from 'react';
import Children from './Children';
// import 'antd/dist/antd.css';
export default function IndexPage(props: any) {
  const [tab, setTabs] = useState(headerList[0]);
  const history = useHistory();
  const toPage = (val: any) => {
    history.push(val?.path);
    setTabs(val.label);
  };
  const onClick = (e: any) => {
    setTabs(e);
    history.push(e?.key);
  };

  useEffect(() => {
    history.push('/homepage');
  }, []);
  // useEffect(() => {
  //   console.log(history, '----');

  //   //  setSource(opens);
  //   //  setIsShow(true);
  //   //  return () => {
  //   //    setSource(closes);
  //   //  };
  // }, [history]);
  return (
    <div className="index-page">
      <div className="index-page-header">
        <div className="header-title">雷剧云台</div>
        <Menu
          onClick={onClick}
          selectedKeys={[tab.label]}
          mode="horizontal"
          items={headerList}
        />
        {/* <div className="headder-list">
          {headerLists.map((val: any) => {
            return (
              <div
                className={`header-item ${val.label == tab ? 'active' : ''}`}
                onClick={() => toPage(val)}
              >
                {val.label}
              </div>
            );
          })}
        </div> */}
      </div>
      <Children children={props.children} />
      <div className="index-page-footer">
        <div className="footer-content">
          <div className="left">广东奇葩</div>
          <img src={footer1} alt="" />
          <img src={footer2} alt="" />
          <img src={footer3} alt="" />
          <div className="right">乐在雷剧</div>
        </div>
      </div>
    </div>
  );
}
